/*
 * @Description: 医疗机构操作页面
 * @Author: 谢涛
 * @Date: 2019-05-13 11:18:23
 * @LastEditTime: 2020-03-02 15:33:55
 * @LastEditors: Please set LastEditors
 */
import React, { Component } from 'react'
import '@ant-design/compatible/assets/index.css';
import {Form, Input, Select, Modal, Col, Row, message, Checkbox, Button} from 'antd';
import '../../../layouts/handleList.css'
import './style.css'
import { institutionsApi, institutionsGroupApi } from '@/services/basic'
import {ButtonLock} from "../../../components/BaseComponent/forms";

const Option = Select.Option;
class EditItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      id: undefined,
      visible: false,
      AdminDiv: [],//所属行政区划
      PreIns: [],//上级医疗机构
      rank: '',//医疗机构级别
      zt: false,//状态
      initialGrade: undefined,//等级下拉框初始值
      initialJb: undefined,//初始级别
      initialDiv: undefined,//初始区域
      initialPreIns: undefined,//初始上级机构
      yydj: undefined,//医院等级
      handler: undefined,//当前正在执行的操作类型
      Yljgz: []//医疗机构组
    }
  }

  //弹出操作页面
  showModal = (handler, record) => {
    if (record) {//如果有record传过来 说明一定是查看或者更新操作
      const { id } = record;
      this.setState({ visible: true, id, handler })
      this.handleView(id);
    } else {//如果是新增操作 那直接展示弹出框 赋值操作类型
      this.setState({ visible: true, handler })
    }
  }

  //关闭操作页面
  hideModal = () => {
    this.setState({
      id: undefined,
      visible: false,
      AdminDiv: [],//所属行政区划
      PreIns: [],//上级医疗机构
      rank: undefined,//医疗机构级别
      zt: false,//状态
      initialGrade: undefined,//等级下拉框初始值
      initialJb: undefined,//初始级别
      initialDiv: undefined,//初始区域
      initialPreIns: undefined,//初始上级机构
      yydj: undefined,//医院等级
      handler: undefined,//当前正在执行的操作类型
      Yljgz: []//医疗机构组
    },() => 
        this.form.resetFields()
    )
  }

  //Modal框自带的取消操作
  handleCancel = () => {
    this.hideModal();
  }

  //Modalk框自带的确认操作
  handleOk = () => {
    let newItem = this.form.getFieldsValue();
    const { handler, id } = this.state
    newItem.id = id;
    newItem.yydj = 1;
    newItem.xzqhid = 47;
    const requestType = handler === 'create' ? 'post' : 'put'
    if (newItem.zt === true) { newItem.zt = '0' } else { newItem.zt = '1'  }
    if (newItem.yyjb === '1') newItem.sjid = '0'
    this.form.validateFields().then(values => {
        institutionsApi[requestType]({ ...newItem })
          .then((response) => {
            if (response.code === '1') {
              this.props.editItemDone();
              this.form.resetFields()
              this.hideModal();
              message.success("操作成功");
            } else {
              message.error(`操作失败 ${response.msg}`);
            }
          })
    })
    .catch(error => {
        // eslint-disable-next-line
        console.dir(error)
    })
  }

  //查看单条
  handleView = (id) => {
    if (id) {
      this.onYljgzSearch();
      institutionsApi.get(id)
        .then((res) => {
          // let { yyjb, sjid, yymc, yydj, xzqhid, zzjgdm, ybdm, yydz, yyyb, yydh, yylxr, zt, tyyy, yljgzid, yljgzName } = { ...res.data };
          let { yyjb, sjid, yymc, yydj, xzqhid, zzjgdm, yybm, yydz, yyyb, yydh, yylxr, zt, tyyy, yljgzid, yljgzName ,qldz} = { ...res.data };
          let { sjyymc,  xzqhqc } = { ...res.data }
          // let set = { yyjb, sjid, yymc, yydj, xzqhid, zzjgdm, ybdm, yydz, yyyb, yydh, yylxr, zt, tyyy, yljgzid };
          let set = { yyjb, sjid, yymc, yydj, xzqhid, zzjgdm, yybm, yydz, yyyb, yydh, yylxr, zt, tyyy, yljgzid ,qldz};
          for (let item in set) {
            if (set[item] === undefined) set[item] = '';
          }
          if (set.zt === '0') { set.zt = true } else { set.zt = false }
          this.form.setFieldsValue({ ...set });
          this.setState({
            visible: true,
            id,
            zt: set.zt,
            rank: set.yyjb,
            AdminDiv: <Option key={set.xzqhid} value={set.xzqhid}>{xzqhqc}</Option>,
            PreIns: <Option key={set.sjid} value={set.sjid}>{sjyymc}</Option>,
            initialGrade: set.yydj,
            initialJb: set.yyjb,
            initialDiv: set.xzqhid,
            initialPreIns: set.sjid,
            Yljgz: <Option value={set.yljgzid} key={set.yljgzid}>{yljgzName}</Option>
          })
        })
    }
  }

  //所属行政区域下拉框输入内容时回调
  onAdminDivSearch = (value) => {
    if (value.charCodeAt(value.length - 1) === 32) {
      value = value.trim();
      institutionsApi.getAdmDivision({ xzqhqc: `${value}`, xzqhjb: this.state.rank })
        .then((res) => {
          if (res.code !== '0' && res.data.length !== 0) {
            let AdminDiv = res.data.map(item => <Option key={item.xzqhid} value={item.xzqhid}>{item.xzqhqc}</Option>);
            this.setState({
              AdminDiv: AdminDiv,
            })
          } else {
            message.error("暂无数据")
          }
        })
    }
  }

  //监听医疗机构级别改变
  onRankChange = (value) => {
    this.setState({ rank: value, initialDiv: undefined, AdminDiv: [] })
    this.form.resetFields(['xzqhid'])
  }

  //上级医疗机构查找
  onPreInsSearch = (value) => {
    if (value.charCodeAt(value.length - 1) === 32) {
      value = value.trim()
      institutionsApi.getParent({ search: `${value}`, yyjb: this.state.rank, zt: '1' })
        .then((res) => {
          if (res.code !== '0' && res.data.length !== 0) {
            let PreIns = res.data.map(item => <Option key={item.id} value={item.id}>{item.yymc}</Option>);
            this.setState({
              PreIns: PreIns,
            })
          } else {
            message.error("暂无数据")
          }
        })
    }
  }

  //监听状态改变
  onZtChange = (value) => {
    this.setState({
      zt: value.target.checked
    })
    if (!value.target.checked) {
      this.form.resetFields(['tyyy'])
    }
  }



  // //医院等级改变
  // onGradeChange = (value) => {
  //   this.setState({ initialGrade: value })
  //   this.form.setFieldsValue({ 'yydj': value })
  // }

  onYljgzSearch = (value) => {
    institutionsGroupApi.getSelectOption().then(res => {
      if (res !== null && res.length !== 0) {
        const Yljgz = res.map(item => <Option value={item.id} key={item.id}>{item.yyzmc}</Option>)
        this.setState({ Yljgz })
      } else {
        message.warning('暂无数据')
      }
    })
  }

  render() {
    const { handler } = this.state;

    return (
      <div className='handle-header'>
        <Modal title=""
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
           footer={this.state.handler === "view" ? null : [
             <Button onClick={this.handleCancel}>取消</Button>,
             <ButtonLock onClick={this.handleOk} type="primary">确定</ButtonLock>
           ]}
          width="800px"
          style={{ top: 80 }}
          maskClosable={false}
          className='handleList Institution-handle'
        >
          <div className="formHeader">
            <span className='handle-title'>{`${handler === 'view' ? '查看' : handler === 'create' ? '新增' : '更新'}公司`}</span>
          </div>

          <Form autoComplete="off" onSubmit={this.handleOk} ref={form => this.form = form}>
            <Row gutter={8}>
              <Col span={12}>
                <Form.Item label="公司级别"
                    name="yyjb"
                    rules={[{ required: true, message: '请选择对应选项!' }]}
                    initialValue={this.state.initialJb}
                >
                    <Select
                      disabled={handler === 'create' ? false : true}
                      allowClear={handler === 'create' ? true : false}
                      placeholder="请选择级别"
                      onChange={this.onRankChange}>
                      {/* <Select.Option value={1}>省级行政区划</Select.Option>
                      <Select.Option value={2}>市级行政区划</Select.Option>
                      <Select.Option value={3}>县级行政区划</Select.Option>
                      <Select.Option value={4}>乡级行政区划</Select.Option>
                      <Select.Option value={5}>村级行政区划</Select.Option>
                      <Select.Option value={6}>组级行政区划</Select.Option> */}
                      {
                            this.props.bookRender('dqjb')
                        }
                    </Select>
                </Form.Item>
              </Col>
              {/* <Col span={12}>
                <Form.Item label="所属行政区域"
                    name="xzqhid"
                    rules={[{ required: true, message: '此为必填项' }]}
                    initialValue={this.state.initialDiv}
                >
                    <Select
                      disabled={handler === 'create' ? (this.state.rank === undefined ? true : false) : true}
                      allowClear={handler === 'create' ? true : false}
                      placeholder="输入关键字按空格查找"
                      filterOption={false}
                      showSearch={true}
                      notFoundContent={null}
                      showArrow={false}
                      onChange={this.onAdminDivChange}
                      onSearch={this.onAdminDivSearch}
                    >
                      {this.state.AdminDiv}
                    </Select>
                </Form.Item>
              </Col> */}
            </Row>
            <Row gutter={8}>
              <Col span={12}>
                <Form.Item label="上级公司"
                    name="sjid"
                    rules={[{ required: this.state.rank === 1 ? false : true, message: '此为必填项' }]}
                    initialValue={this.state.initialPreIns}
                >
                  <Select
                    disabled={handler === 'view' ? true : this.state.rank === 1 ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder="输入关键字按空格查找"
                    filterOption={false}
                    showSearch={true}
                    notFoundContent={null}
                    showArrow={false}
                    onSearch={this.onPreInsSearch}
                  >
                    {this.state.PreIns}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="公司名称"
                    name="yymc"
                    rules={[{ required: true, message: '此项为必填项' }]}
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入'
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              
              {/* <Col span={12}>
                <Form.Item label="组织机构代码"
                    name="zzjgdm"
                    rules={[
                        { required: true, message: '此为必填项' },
                    ]}
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入'
                  />
                </Form.Item>
              </Col> */}
            </Row>
            <Row gutter={8}>
              <Col span={12}>
                <Form.Item label="公司编码"
                    // name="ybdm"
                    name="yybm"
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入'
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="地址"
                    name="yydz"
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入'
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={12}>
                <Form.Item label="邮编"
                    name="yyyb"
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入'
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="电话号码"
                    name="yydh"
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入'
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={12}>
                <Form.Item label="公司负责人"
                    name="yylxr"
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入'
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="公司组"
                    name="yljgzid"
                >
                    <Select
                      disabled={handler === 'view' ? true : false}
                      allowClear={handler === 'view' ? false : true}
                      placeholder="请选择"
                      filterOption={false}
                      showSearch={true}
                      notFoundContent={null}
                      showArrow={false}
                      onFocus={this.onYljgzSearch}
                    >
                      {this.state.Yljgz}
                    </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="群聊地址"
                    name="qldz"
                >
                   <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder='请输入'
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={12}>
                <Form.Item label="作废标志"
                    name="zt"
                    initialValue={this.state.zt}
                >
                  <Checkbox
                    checked={this.state.zt}
                    disabled={handler === 'view' ? true : false}
                    onChange={this.onZtChange}
                  >作废</Checkbox>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="作废原因"
                    name="tyyy"
                    rules={[{ required: this.state.zt ? true : false, message: '若选择作废，需说明原因' }]}
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                    <Input
                      disabled={handler === 'view' ? true : this.state.zt ? false : true}
                      allowClear={handler === 'view' ? false : true}
                      placeholder='请填写作废原因'
                    />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Modal>
      </div>
    );
  }
}
export default EditItem